<template lang="pug">
.search-page()
    .page-content()
        div(class="top-panel")
            mt-header.base-line--bottom(title="智能目录")
                router-link(to="/", slot="left")
                    mt-button(icon="back")
            mt-navbar(v-model="selected")
                mt-tab-item(id="1") 按车型
                mt-tab-item(id="2") VIN码
                mt-tab-item(id="3") OE号
                mt-tab-item(id="4") 编号
                mt-tab-item(id="5") 发动机号
            div(class="search-panel base-line--surround")
                div(class="search-field")
                    mt-field(v-model="searchCar",placeholder="请输入车型品牌或车系名称",v-if="searchButtonList.length===0&&selected==='1'")
                    mt-field(v-model="searchVin",placeholder="请输入或手机扫描VIN码查询",v-if="selected==='2'")
                    mt-field(v-model="searchOe",placeholder="请输入OE号查询",v-if="selected==='3'")
                    mt-field(v-model="searchPartsNo",placeholder="请输入厂商编码查询",v-if="selected==='4'")
                    mt-field(v-model="searchEngineNo",placeholder="请输入发动机型号查询",v-if="selected==='5'")
                    div(class="keys-list",v-if="searchButtonList.length!==0&&selected==='1'")
                        div(class="button-list")
                            mt-button(type="primary",v-for="(item,index) in searchButtonList",:key="index")
                                | {{item.name}}
                                //- i(class="fa fa-close")
                        div(class="clean-search",@click="cleanSearch")
                            i(class="fa fa-close")
                div(class="search-button base-line--left",@click="searchKeys") 查
        div(class="content-panel")
            mt-tab-container(v-model="selected")
                mt-tab-container-item(id="1")
                    carIndexList(@carInfo="getCarInfo",v-if="!autoBrandId || searchButtonList.length===0")
                    div(v-if="goodsList.length==0")
                        .car-list(v-if="autoBrandId")
                            .car-list-child(v-for="(item,index) in carBrandList",:key="index",v-if="searchButtonList.length==1")
                                h3.title {{item.name}}
                                mt-cell(v-for="(carItem,carIndex) in item.items",:title="carItem.name",:key="carIndex",class="base-line--bottom car-cell",@click.native="showCarSeries(carItem)")
                                    img(src="//c1.51cjml.com/cjmlfactoryresources/default/images/autocategory/car1.png",@click.stop="showImg(carItem.images)",v-if="carItem.images.length")
                            .car-list-child(v-for="(item,index) in carSeriesList",:key="index",v-if="searchButtonList.length==2")
                                mt-cell(:title="item.name",class="base-line--bottom car-cell",@click.native="showCarOil(item)")
                                    img(src="//c1.51cjml.com/cjmlfactoryresources/default/images/autocategory/car1.png",@click.stop="showImg(item.images)",v-if="item.images.length")
                            .car-list-child(v-for="(item,index) in carOilList",:key="index",v-if="searchButtonList.length==3")
                                mt-cell(:title="item.name",class="base-line--bottom car-cell",@click.native="showCarDetail(item)")
                                    img(src="//c1.51cjml.com/cjmlfactoryresources/default/images/autocategory/car1.png",@click.stop="showImg(item.images)",v-if="item.images.length")
                    div(class="goodlist",v-if="goodsList.length!=0")
                        goodsList(:carData="carData")
                mt-tab-container-item(id="2")
                  vinList(:vin="searchVin",ref="vinListChild")
                mt-tab-container-item(id="3")
                  oeList(:oemno="searchOe",ref="oeListChild")
                mt-tab-container-item(id="4")
                  oeList(:oemno="searchOe",ref="oeListChild")
                mt-tab-container-item(id="5")
                  oeList(:oemno="searchOe",ref="oeListChild")
    imageView(v-if="isImageViewShow",@imageWindow = "getImageWindow")
</template>
<script>
import carIndexList from '@/components/function/carIndexList.vue'
import vinList from '@/components/function/vinList.vue'
import oeList from '@/components/function/oeList.vue'
import imageView from '@/components/function/imageView.vue'
import goodsList from '@/components/function/goodsList.vue'
import noPanel from '@/components/function/noPanel.vue'
export default {
  data () {
    return {
      selected: '',
      searchCar: '',
      searchVin: '',
      searchOe: '',
      searchPartsNo: '',
      searchEngineNo: '',
      autoBrandId: '',
      searchButtonList: [], // 搜索按钮列表
      carBrandList: [], // 车辆品牌列表
      carSeriesList: [], // 车系列表
      carOilList: [], // 油耗列表
      carDetail: {}, // 车辆详情
      goodsList: [], // 商品列表
      carData: {}, //  车辆详情
      imgList: [],
      isImageViewShow: false,
      keys: ''
    }
  },
  components: {
    carIndexList,
    vinList,
    oeList,
    imageView,
    goodsList,
    noPanel
  },
  watch: {
    selected: function (val) {
      this.$router.replace({
        name: 'search'
      })
    }
  },
  created () {
    this.selected = this.$route.query.menu || '1'
    this.keys = this.$route.query.keys || ''
    console.log(this.keys)
  },
  mounted () {
    if (this.$route.query.keys) {
      this.searchKeys()
    }
  },
  methods: {
    searchKeys () {
      if (this.selected === '2') {
        this.searchVin = this.keys ? this.keys : this.searchVin
        this.$nextTick(() => {
          this.$refs.vinListChild.getList()
          this.keys = ''
        })
      } else if (this.selected === '3') {
        this.searchOe = this.keys ? this.keys : this.searchOe
        this.$nextTick(() => {
          this.$refs.oeListChild.getList()
          this.keys = ''
        })
      } else if (this.selected === '4') {
        // this.$refs.oeListChild.getList()
      } else if (this.selected === '5') {
        // this.$refs.oeListChild.getList()
      }
    },
    getCarInfo (args) {
      this.searchButtonList = []
      this.searchButtonList.push({
        brandId: args[1],
        name: args[0]
      })
      this.autoBrandId = args[1]
      this.getCarBrandList()
    },
    cleanSearch () {
      this.searchButtonList = []
      this.goodsList = []
    },
    getImageWindow (val) {
      this.isImageViewShow = val
    },
    async getCarBrandList () {
      let params = {
        brandId: this.autoBrandId
      }
      let oList = await carAPI.getautoselectbybrand(params)
      this.carBrandList = oList
    },
    showImg (imgs) {
      this.imgList = imgs
      this.isImageViewShow = true
      this.$store.commit('SET_IMGLIST', this.imgList)
    },
    // 展示车系
    showCarSeries (carItem) {
      let obj = {
        id: carItem.key,
        name: carItem.name
      }
      this.searchButtonList.push(obj)
      // 判断是否有子集
      if (carItem.items) {
        console.log(carItem.items)
        this.carSeriesList = carItem.items
      } else {
        this.showCarDetail(carItem)
      }
      console.log('carItem.i:' + carItem.items)
    },
    // 展示油耗
    showCarOil (oilItem) {
      let obj = {
        id: oilItem.key,
        name: oilItem.name
      }
      this.searchButtonList.push(obj)
      // 判断是否有子集
      if (oilItem.items) {
        this.carOilList = oilItem.items
      } else {
        this.showCarDetail(oilItem)
      }
      console.log('oilItem.i:' + oilItem.items)
    },
    // 展示车辆详情
    showCarDetail (detail) {
      this.carDetail = detail
      this.goodsList.push(this.carDetail)
      this.carData = this.carDetail
    }
  }
}
</script>
<style lang="scss">
.search-page{
    width: 100%;
    height: 100%;
    .top-panel{
      height: 264px;
    }
    .page-content{
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .content-panel{
        flex: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .search-panel{
        width: 95%;
        background: #fff;
        height: 80px;
        margin: 12px auto;
        font-size: 32px;
        display: flex;
        .search-field{
            flex: 1;
            box-sizing: border-box;
        }
        .keys-list{
            padding: 0 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            button{
                margin-right: 8px;
                i{
                    padding-left: 6px;
                }
            }
        }
        .search-button{
            width: 80px;
            line-height: 80px;
            text-align: center;
        }
        .clean-search{
            color: #999;
        }
    }

    .title{
        height: 52px;
        line-height: 52px;
        font-size: 28px;
        text-indent: 1em;
    }
}
</style>
